<template>
	<el-select
		v-model="value"
		filterable
		clearable
		remote
		reserve-keyword
		placeholder="请输入次卡名称"
		:remote-method="memRemoteMethod"
		remote-show-suffix
		:loading="loading"
		style="width: 100%;"
		@change="memChange"
	  >
		<el-option
		  v-for="item in options"
		  :key="item.id"
		  :label="item.name+'('+item.text.type+')  价格：'+item.price+'  次数：'+item.numbers+'  期限:'+item.term+'个月'"
		  :value="item.id"
		>
			  <span style="float: left;font-weight: bold;margin-right: 10px;">{{ item.name}}（{{item.text.type}}）</span>
			  <span style="float: left;margin-right: 10px;">价格:{{ item.price}}</span>
			  <span style="float: left;color: red;">次数:{{ item.numbers }}</span>
			  <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
				期限:{{ item.term }}个月
			  </span>
		</el-option>
	  </el-select>
</template>

<script setup name="countElSelect">
	import { queryCountCard} from "@/api/crm/countCard";
	
	const emits = defineEmits(['change'])
	
	const value = ref(null);
	const loading = ref(false);
	const options = ref([]);
	

	
	function memRemoteMethod(query){
		loading.value = true
		queryCountCard(query).then(rsp=>{
			loading.value = false
			options.value = rsp.rows
		})
	}
	
	function memChange(params){
		var info = null;
		for (var i = 0; i < options.value.length; i++) {
			let item = options.value[i]
			if(item.id == params){
				info = item;
				break;
			}
		}
		emits('change',params,info)
	}
	
	memRemoteMethod(null);
</script>

<style>
</style>